//useRef的使用
//ref的作用:保存数据   获取DOM   获取组件实例对象
// useRef的作用和React.createRef完全相同

import React, {  useEffect, useRef, useState } from 'react';

export default function App() {
  // 准备组件的显示与隐藏
  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      {isShow && <Child></Child>}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
}

function Child() {
  // 1.创建Ref
  const timerRef=useRef()

  //挂载时开启定时器
  useEffect(()=>{
    // 使用Ref保存数据
    timerRef.current= setInterval(()=>{
      console.log('定时器开启  ----->  ');
    },1000)
  },[])
  
  //卸载时关闭定时器
  useEffect(()=>{
    return ()=>{
      clearInterval(timerRef.current)
    }
  },[])

  return <div>我是子组件</div>;
}